<template>
    <div class="order-detail">
        <div v-if="detailInfo" class="detail-ctx">
            <div class="ctx-baseinfo">
                <div class="baseinfo-title">运单信息</div>
                <div class="baseinfo-ctx">
                    <div class="ctx-item">
                        <div class="item-order">
                            <span>运单编号</span>
                            <span class="order-no">{{detailInfo.waybillNum}}</span>
                        </div>
                        <div class="item-address">源头单位：{{detailInfo.stationName}}</div>
                    </div>
                    <div class="ctx-item" style="margin-top:20px;">
                       <div class="item-order">
                         运单发起人：{{detailInfo.originator}}
                      </div>
                      <div class="item-address">运单发起时间：{{detailInfo.initiationTime}}</div>
                   </div>
                    <div class="ctx-item" style="margin-top:20px;">
                        <div class="item-info">
                            <div class="info-rs">
                              运单确认：
                                <span v-if="detailInfo.hasExit == '1'">是</span>
                                <span v-else style="color: red;">否</span>
                            </div>
                           <div class="info-rs">
                             运单确认人：{{detailInfo.surePerson || "无"}}
                           </div>
                        </div>
                        <div class="item-info">
                            <div class="info-rs">
                              运单确认时间：{{detailInfo.sureTime || "无"}}
                            </div>
                        </div>
                    </div>
                    <div class="ctx-item" style="margin-top:20px;">
                      <div class="item-info">
                        <div class="info-rs">
                          车辆出入场记录
                        </div>
                        <div class="info-rs">
                          进场时间：<span v-if="carEnter.occurrenceTime != null"><a style="color:blue;" @click="car_enter_leave(1)">{{carEnter.occurrenceTime}}</a></span>
                          <span v-else>无</span>
                        </div>
                      </div>
                      <div class="item-info">
                        <div class="info-rs">
                          出场时间：<span v-if="carLeave.occurrenceTime != null"><a style="color:blue;" @click="car_enter_leave(2)">{{carLeave.occurrenceTime}}</a></span>
                                   <span v-else>无</span>
                        </div>
                      </div>
                    </div>
                    <div class="ctx-pic">
                        <div v-for="(item,index) in detailInfo.leaveImage" :key="'img_'+index" class="pic-box">
                            <el-image :src="item" :preview-src-list="detailInfo.leaveImage"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ctx-goods">
                <div class="goods-title">
                    <div class="title-g">货物信息（{{detailInfo.receiveNum}}家）</div>
                    <div class="weight">货物总重:{{detailInfo.totalWeight || 0}}kg</div>
                    <div @click="OpenGoods" v-if="!isGoodsOpen" class="all">
                        <span class="txt">展开所有</span>
                        <span class="btn">+</span>
                    </div>
                    <div @click="CloseGoods" v-if="isGoodsOpen" class="all">
                        <span class="txt">收起</span>
                        <span class="btn">-</span>
                    </div>
                </div>
                <div class="goods-ctx">
                    <div v-for="(item,index) in TmpGoodsList" :key="index" class="ctx-card">
                        <div class="card-rs">
                            <div class="rs-title">
                                <div class="name">{{item.recipientGoods}}</div>
                                <div class="val">货物重量：{{item.goodsWeight}}kg</div>
                            </div>
                            <div class="rs-txt">
                                <div class="txt-name">收货人：{{item.people}}</div>
                                <div class="txt-val">收货人电话：{{item.phone}}</div>
                            </div>
                            <div class="rs-txt">
                                收货企业：{{item.company}}
                            </div>
                            <div class="rs-txt">
                                <div class="address">收货地址：{{item.address}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ctx-driver">
                <div class="driver-title">车辆驾驶员信息 <span style="float: right;" v-if="detailInfo.isLeaveCheck == '1' && detailInfo.leaveCheck != null"><a style="color: blue;font-size: 16px;" @click="carLeaveCheck()">车辆出场检查</a></span></div>
                <div class="driver-item">
                    <div class="item-txt">
                        <div class="txt-name">驾驶员姓名：</div>
                      <div class="txt-val"><a style="color:blue;" @click="getDriver()">{{detailInfo.deiver.driverName}}</a></div>
                    </div>
                    <div class="item-txt">
                        <div class="txt-name">驾驶证号：</div>
                        <div class="txt-val">{{detailInfo.deiver.driverIdCard}}</div>
                    </div>
                    <div class="item-txt">
                        <div class="txt-name">从业资格证：</div>
                        <div class="txt-val">{{detailInfo.deiver.transportationLicense}}</div>
                    </div>
                    <div class="item-txt">
                        <div class="txt-name">有效期：</div>
                        <div class="txt-val">{{detailInfo.deiver.transportationValid_date}}</div>
                    </div>
                </div>
            </div>
            <div class="ctx-driver">
              <div class="driver-title">车辆信息（注册信息）</div>
                <div class="driver-info">
                    <div class="item-txt">
                        车牌号码：<a style="color:blue;" @click="getCar(1)">{{detailInfo.deiver.carLicenceNumber}}</a>
                    </div>
                    <div class="item-txt" style="width: 300px;margin-left: 50px;">
                      车辆型号：{{detailInfo.deiver.model || "-"}}
                    </div>
                    <div class="info-item">
                        车轴数：{{detailInfo.deiver.axleNums}}<span style="color: red" v-if="detailInfo.deiver.isAxleNumsConform ==='3'">  (标准中无该车型)</span>
                    </div>
                    <div class="info-item">
                        总质量：{{detailInfo.deiver.carTotal || "-"}} <span v-if="detailInfo.deiver.carTotal > 0">kg</span>
                    </div>
                    <div class="info-item">
                        核定载重量：{{detailInfo.deiver.checkCarryingCapacity || "-"}} <span v-if="detailInfo.deiver.checkCarryingCapacity > 0">kg</span>
                    </div>
                    <div class="info-item">
                        准牵引总质量：{{detailInfo.deiver.tractionMass || "-"}} <span v-if="detailInfo.deiver.tractionMass > 0">kg</span>
                    </div>
                </div>
                <div v-if="detailInfo.deiver.hasTrailerCar == '1'" class="driver-info">
                    <div class="item-txt">
                      挂车号码：<a style="color:blue;" @click="getCar(2)">{{detailInfo.deiver.carLicenceNumberG }}</a>
                    </div>
                    <div class="item-txt" style="width: 300px;margin-left: 42px;">
                      车辆型号：{{detailInfo.deiver.modelG || "-"}}
                    </div>
                    <div class="info-item">
                        车轴数：{{detailInfo.deiver.axleNumsG}}<span style="color: red" v-if="detailInfo.deiver.isAxleNumsConformG ==='3'">  (标准中无该车型)</span>
                    </div>
                    <div class="info-item">
                        总质量：{{detailInfo.deiver.carTotalG || "-"}} <span v-if="detailInfo.deiver.carTotalG > 0">kg</span>
                    </div>
                    <div class="info-item">
                        核定载重量：{{detailInfo.deiver.checkCarryingCapacityG || "-"}} <span v-if="detailInfo.deiver.checkCarryingCapacityG > 0">kg</span>
                    </div>
                    <div class="info-item">
                        准牵引总质量：{{detailInfo.deiver.tractionMassG || "-"}} <span v-if="detailInfo.deiver.tractionMassG > 0">kg</span>
                    </div>
                </div>
              <div class="warn-info" v-if="detailInfo.deiver.isAxleNumsConform ==='1' || detailInfo.deiver.isAxleNumsConformG ==='1'">
                <div class="info-item">
                  <span v-if="detailInfo.deiver.isAxleNumsConform ==='1'" style="color:red;">车轴数</span><span style="color:red;" v-if="detailInfo.deiver.isAxleNumsConform ==='1' && detailInfo.deiver.isAxleNumsConformG ==='1'">、</span><span v-if="detailInfo.deiver.isAxleNumsConformG ==='1'" style="color:red;">挂车车轴数</span><span style="color:red;">识别可能有误,待人工确认</span>
                </div>
              </div>
            </div>

            <div class="ctx-driver">
              <div class="driver-title">车辆信息（标准信息）</div>
              <div class="driver-info" v-if="this.car2 != null && this.car2.model != null && this.car2.model != ''">
                <div class="item-txt" style="width: 350px;">
                  车辆型号：{{this.car2.model}}
                </div>
                <div class="info-item">
                  车轴数：{{this.car2.axleNumber}}
                </div>
                <div class="info-item">
                  总质量：{{this.car2.allMass || "-"}} <span v-if="this.car2.allMass > 0">kg</span>
                </div>
                <div class="info-item">
                  核定载重量：{{this.car2.ratedMass || "-"}} <span v-if="this.car2.ratedMass > 0">kg</span>
                </div>
                <div class="info-item">
                  准牵引总质量：{{this.car2.totalMassOfQuasiTrailer || "-"}} <span v-if="this.car2.totalMassOfQuasiTrailer > 0">kg</span>
                </div>
              </div>
              <div class="warn-info" v-else>
                <div class="info-item">
                  标准中无该车型信息,根据用户填写轴数及总质量判定
                </div>
              </div>
              <div v-if="detailInfo.deiver.hasTrailerCar == '1'">
                <div v-if="this.carG != null && this.carG.model != null && this.carG.model != ''" class="driver-info">
                  <div class="item-txt" style="width: 350px">
                    挂车型号：{{this.carG.model}}
                  </div>
                  <div class="info-item">
                    车轴数：{{this.carG.axleNumber}}
                  </div>
                  <div class="info-item">
                    总质量：{{this.carG.allMass || "-"}} <span v-if="this.carG.allMass > 0">kg</span>
                  </div>
                  <div class="info-item">
                    核定载重量：{{this.carG.ratedMass  || "-"}} <span v-if="this.carG.ratedMass  > 0">kg</span>
                  </div>
                  <div class="info-item">
                    准牵引总质量：{{this.carG.totalMassOfQuasiTrailer || "-"}} <span v-if="this.carG.totalMassOfQuasiTrailer > 0">kg</span>
                  </div>
                </div>
                <div class="warn-info" v-else>
                  <div class="info-item">
                    标准中无该挂车车型信息,根据用户填写轴数及总质量判定
                  </div>
                </div>
              </div>
            </div>

            <div class="ctx-weight">
                <div class="weight-title">
                    <div class="title-w">称重信息</div>
                    <div v-if="!isOpenWeight" @click="OpenAllWeight" class="all">
                        <span class="txt">展示所有</span>
                        <span class="btn">+</span>
                    </div>
                    <div v-if="isOpenWeight" @click="CloseAllWeight" class="all">
                        <span class="txt">收起</span>
                        <span class="btn">-</span>
                    </div>
                </div>
                <div class="weight-info">
                    <table class="info-table">
                        <thead>
                            <tr>
                                <th>称重总重量</th>
                                <th>称重时间</th>
                                <th>是否超载</th>
                                <th>说明</th>
                                <th>前图片</th>
                                <th>后图片</th>
                                <th>称重人员</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody v-if="TmpWeightList.length">
                           <tr v-for="(item,index) in TmpWeightList" :key="index">
                                <td >{{item.totalWeight}}kg</td>
                                <td>{{item.weightTime}}</td>
                                <td :class="{'state':item.isCxyc==1}">{{item.isCxyc==1?'是':'否'}}</td>
                                <td v-if="item.isCxyc==1">{{item.czDesc}}</td><td v-else>-</td>
                                <td>
                                    <div class="pic-box">
                                      <el-image :src="item.bPlatePhoto" :preview-src-list="WeightImage">
                                        <div slot="error" class="image-slot">
                                          无
                                        </div>
                                      </el-image>
                                    </div>
                                </td>
                                <td>
                                    <div class="pic-box">
                                      <el-image :src="item.aPlatePhoto" :preview-src-list="WeightImage">
                                        <div slot="error" class="image-slot">
                                          无
                                        </div>
                                      </el-image>
                                    </div>
                                </td>
                                <td>{{item.weightStaff}}</td>
                                <td>
                                  <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-view"
                                    @click="handleVideo(item.weightTime,item.id)"
                                  >观看视频</el-button>
                               </td>
                            </tr>
                        </tbody>
                        <tbody v-if="TmpWeightList.length==0">
                             <tr>
                                <td colspan="8">暂无称重信息</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--<div class="ctx-warn">
                <div class="warn-title">异常信息</div>
                <div class="warn-info">
                    <div class="info-item">
                        {{detailInfo.abnormalDesc || '无'}}
                    </div>
                </div>
            </div>-->
        </div>

      <!-- 人员详情 -->
      <el-dialog :title="驾驶员详情" :visible.sync="openDriver" width="980px">
        <el-form ref="form" :model="driver" :rules="rules" label-width="140px">

          <el-col :span="12">
            <el-form-item label="姓名:" >{{driver.driverName}}</el-form-item>
            <el-form-item label="身份证号:">{{driver.userIdCard}}</el-form-item>
          </el-col>

          <el-col :span="12">
<!--            <el-form-item label="从业人员驾驶证号:" >{{driver.driverDrivingLicence}}</el-form-item>-->
            <el-form-item label="驾驶证准驾车型:">{{driver.driverDrivingVehicleType}}</el-form-item>
            <el-form-item label="从业资格类别:">{{driver.driverTransportationType}}</el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="驾驶证有效期始:">{{driver.driverDrivingStartDate}}</el-form-item>
            <el-form-item label="驾驶证有效时长:" >{{driver.driverDrivingEndDate}}</el-form-item>
          </el-col>

<!--          <el-row>-->
<!--            <el-form-item label="驾驶证准驾车型:">{{driver.driverDrivingVehicleType}}</el-form-item>-->
<!--          </el-row>-->

          <el-col :span="12">
            <el-form-item label="资格证初领日期:" v-if="driver.driverTransportationInceptionDate != null">{{driver.driverTransportationInceptionDate| dateString('YYYY-MM-DD')}}</el-form-item>
            <el-form-item label="资格证初领日期"  v-else></el-form-item>
            <el-form-item label="资格证有效日期:" v-if="driver.driverTransportationValidDate != null">{{driver.driverTransportationValidDate| dateString('YYYY-MM-DD')}}</el-form-item>
            <el-form-item label="资格证有效日期"  v-else></el-form-item>
          </el-col>

          <el-row>
            <el-form-item label="从业资格证号:">{{driver.driverTransportationLicense}}</el-form-item>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="驾驶证主页照片:" v-if="driver.driverDrivingFirstPageUrl != null && driver.driverDrivingFirstPageUrl != ''">
                <el-image :src="driver.driverDrivingFirstPageUrl" style="width: 100px; height: 100px" :preview-src-list="srcList">
                  <div slot="error" class="image-slot">
                    无
                  </div>
                </el-image>
              </el-form-item>
              <el-form-item label="驾驶证主页照片" v-else>
                无
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="驾驶证副页照片:" v-if="driver.driverDrivingSecondPageUrl == undefined || driver.driverDrivingSecondPageUrl == ''">
                无
              </el-form-item>
              <el-form-item label="驾驶证副页照片:" v-else>
                <el-image :src="driver.driverDrivingSecondPageUrl" style="width: 100px; height: 100px" :preview-src-list="srcList">
                  <div slot="error" class="image-slot">
                    无
                  </div>
                </el-image>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-form-item label="从业资格证书照片:" v-if="driver.driverTransportationPageUrl != null && driver.driverTransportationPageUrl != ''">
              <el-image :src="driver.driverTransportationPageUrl" style="width: 100px; height: 100px" :preview-src-list="srcList" >
                <div slot="error" class="image-slot">
                  无
                </div>
              </el-image>
            </el-form-item>
            <el-form-item label="从业资格证书照片" v-else>
              无
            </el-form-item>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelDriver">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog :title="车辆详情" :visible.sync="openCar" width="980px">
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
          <el-col :span="12">
            <el-form-item label="人员身份证号" >{{car.userIdCard}}</el-form-item>
            <el-form-item label="车牌号码">{{car.carLicenceNumber}}</el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="车牌颜色" >{{car.carLicenceColorName}}</el-form-item>
            <el-form-item label="车辆类型">{{car.carTypeName}}</el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="道路运输证号" >{{car.transportCertificateNum}} </el-form-item>
<!--            <el-form-item label="是否当前使用车">{{isYesOrNo(car.isCurrentUse)}}</el-form-item>-->
            <el-form-item label="当前绑定挂车车牌" v-if="car.hasTrailerCar == '1'">{{car.trailerCarNo}}</el-form-item>
            <el-form-item label="当前绑定挂车车牌" v-else>无</el-form-item>
          </el-col>

<!--          <el-col :span="12">-->
<!--&lt;!&ndash;            <el-form-item label="是否已绑定挂车" >{{isYesOrNo(car.hasTrailerCar)}}</el-form-item>&ndash;&gt;-->
<!--            -->
<!--          </el-col>-->


            <el-col :span="12">
              <el-form-item label="核定载重量" >{{car.checkCarryingCapacity}}<span v-if="car.checkCarryingCapacity != null" style="margin-left: 5px;">kg</span></el-form-item>
              <el-form-item label="车轴数" >{{car.carAxleNums}} </el-form-item>
            </el-col>



            <el-col :span="12">
              <el-form-item label="整备质量" >{{car.unladenMass}}<span v-if="car.unladenMass != null" style="margin-left: 5px;">kg</span></el-form-item>
              <el-form-item label="车辆总质量" >{{car.carTotal}} <span v-if="car.carTotal != null" style="margin-left: 5px;">kg</span></el-form-item>
            </el-col>
          <el-col :span="12">
            <el-form-item label="准牵引总质量" >{{car.tractionMass}} <span v-if="car.tractionMass != null && car.tractionMass !=''" style="margin-left: 5px;">kg</span></el-form-item>
<!--            <el-form-item label="道路运输状态" >{{yyzt(car.transportationState)}} </el-form-item>-->
          </el-col>

          <el-row>
            <el-col :span="12">
              <el-form-item label="道路运输证有效期" >{{car.transportationValidDate}} </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="行驶证主页照片" v-if="car.vehicleFirstPageUrl != null && car.vehicleFirstPageUrl != ''">
                <el-image :src="car.vehicleFirstPageUrl" style="width: 100px; height: 100px" :preview-src-list="srcList">
                  <div slot="error" class="image-slot">
                    无
                  </div>
                </el-image>
              </el-form-item>
              <el-form-item label="行驶证主页照片" v-else>
                无
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="行驶证副页照片" v-if="car.vehicleSecondPageUrl != null && car.vehicleSecondPageUrl != ''">
                <el-image :src="car.vehicleSecondPageUrl" style="width: 100px; height: 100px" :preview-src-list="srcList" >
                  <div slot="error" class="image-slot">
                    无
                  </div>
                </el-image>
              </el-form-item>
              <el-form-item label="行驶证副页照片" v-else>
                无
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="道路运输证照片"  v-if="car.transportationPageUrl != null && car.transportationPageUrl != ''">
              <el-image :src="car.transportationPageUrl" style="width: 100px; height: 100px" :preview-src-list="srcList">
                <div slot="error" class="image-slot">
                  无
                </div>
              </el-image>
            </el-form-item>
            <el-form-item label="道路运输证照片" v-else>
              无
            </el-form-item>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelCar">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 添加或修改车辆出厂检查对话框 -->
      <el-dialog :title="车辆出场检查详情" :visible.sync="openLeaveCheck" width="900px" v-if="detailInfo.isLeaveCheck == '1' && detailInfo.leaveCheck != null">
        <el-form ref="form" :model="form" :rules="rules" label-width="180px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="车辆前后牌照检查">{{ isYc(detailInfo.leaveCheck.checkCarNo) }} <span v-if="detailInfo.leaveCheck.checkCarNo == '2'">，异常描述：{{detailInfo.leaveCheck.descCarNo}}</span></el-form-item>
              <el-form-item label="驾驶员证件检查">{{ isYc(detailInfo.leaveCheck.checkDriverLicense) }} <span v-if="detailInfo.leaveCheck.checkDriverLicense == '2'">，异常描述：{{detailInfo.leaveCheck.descDriverLicense}}</span></el-form-item>
              <el-form-item label="随车许可证检查">{{ isYc(detailInfo.leaveCheck.checkLicense) }} <span v-if="detailInfo.leaveCheck.checkLicense == '2'">，异常描述：{{detailInfo.leaveCheck.descLicense}}</span></el-form-item>
              <el-form-item label="灯光检查">{{ isYc(detailInfo.leaveCheck.checkLighting) }} <span v-if="detailInfo.leaveCheck.checkLighting == '2'">，异常描述：{{detailInfo.leaveCheck.descLighting}}</span></el-form-item>
              <el-form-item label="刹车检查">{{ isYc(detailInfo.leaveCheck.checkBrake) }} <span v-if="detailInfo.leaveCheck.checkBrake == '2'">，异常描述：{{detailInfo.leaveCheck.descBrake}}</span></el-form-item>
              <el-form-item label="胎压检查">{{ isYc(detailInfo.leaveCheck.checkTirePressure) }} <span v-if="detailInfo.leaveCheck.checkTirePressure == '2'">，异常描述：{{detailInfo.leaveCheck.descTirePressure}}</span></el-form-item>
              <el-form-item label="备胎检查">{{ isYc(detailInfo.leaveCheck.checkSpareTire) }} <span v-if="detailInfo.leaveCheck.checkSpareTire == '2'">，异常描述：{{detailInfo.leaveCheck.descSpareTire}}</span></el-form-item>
              <el-form-item label="尿素溶液添加检查">{{ isYc(detailInfo.leaveCheck.checkUrea) }} <span v-if="detailInfo.leaveCheck.checkUrea == '2'">，异常描述：{{detailInfo.leaveCheck.descUrea}}</span></el-form-item>
              <el-form-item label="机油检查">{{ isYc(detailInfo.leaveCheck.checkEngineOil) }} <span v-if="detailInfo.leaveCheck.checkEngineOil == '2'">，异常描述：{{detailInfo.leaveCheck.descEngineOil}}</span></el-form-item>
              <el-form-item label="获取装载安全可靠性检查">{{ isYc(detailInfo.leaveCheck.checkSafety) }} <span v-if="detailInfo.leaveCheck.checkSafety == '2'">，异常描述：{{detailInfo.leaveCheck.descSafety}}</span></el-form-item>
              <el-form-item label="其他检查">{{ detailInfo.leaveCheck.checkOther }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="openLeaveCheck = false">关 闭</el-button>
        </div>
      </el-dialog>

      <div class="videoview" style="display:none;">
        <iframe width=0 height=0 id="url" :src="videoUrl"></iframe>
      </div>

      <el-dialog title="车型校验比对结果" :visible.sync="openCarModelView" width="800px">
        <el-form    label-width="110px">
          <div class="div-view">
            <table class="sheet_table">
              <tr>
                <td width="33%;" ></td>
                <td width="33%;" >标准</td>
                <td width="34%;" >实际</td>
              </tr>
              <tr>
                <td>车轴数</td>
                <td v-if="this.carType =='1'">{{this.car2.axleNumber || "-"}}</td>
                <td v-else>{{this.carG.axleNumber || "-"}}</td>
                <td v-if="this.carType =='1'">{{detailInfo.deiver.axleNums || "-"}}</td>
                <td v-else>{{detailInfo.deiver.axleNumsG || "-"}}</td>
              </tr>
              <tr>
                <td >总质量</td>
                <td v-if="this.carType =='1'">{{this.car2.allMass || "-"}}</td>
                <td v-else>{{this.carG.allMass || "-"}}</td>
                <td v-if="this.carType =='1'">{{detailInfo.deiver.carTotal || "-"}}</td>
                <td v-else>{{detailInfo.deiver.carTotalG || "-"}}</td>
              </tr>
              <tr>
                <td >核定载重量</td>
                <td v-if="this.carType =='1'">{{this.car2.ratedMass || "-"}}</td>
                <td v-else>{{this.carG.ratedMass || "-"}}</td>
                <td v-if="this.carType =='1'">{{detailInfo.deiver.checkCarryingCapacity || "-"}}</td>
                <td v-else>{{detailInfo.deiver.checkCarryingCapacityG || "-"}}</td>
              </tr>
              <tr>
                <td >准牵引总质量</td>
                <td v-if="this.carType =='1'">{{this.car2.totalMassOfQuasiTrailer || "-"}}</td>
                <td v-else>{{this.carG.totalMassOfQuasiTrailer || "-"}}</td>
                <td v-if="this.carType =='1'">{{detailInfo.deiver.tractionMass || "-"}}</td>
                <td v-else>{{detailInfo.deiver.tractionMassG || "-"}}</td>
              </tr>
            </table>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="openCarModelView = false">关 闭</el-button>
        </div>
      </el-dialog>

      <el-dialog :title="carEnterTitle" :visible.sync="openCarEnter" width="980px">
        <el-form :model="carEnterLeave" label-width="140px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="车牌号码" >{{carEnterLeave.plantNo}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="carEnterLeave.type == '1'" label="进场时间" >{{carEnterLeave.occurrenceTime}}</el-form-item>
              <el-form-item v-if="carEnterLeave.type == '2' || carEnterLeave.type == '4'" label="出场时间" >{{carEnterLeave.occurrenceTime}}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="车辆照片" v-if="carEnterLeave.frontPlatePhoto != null && carEnterLeave.frontPlatePhoto != ''">
                <el-image :src="carEnterLeave.frontPlatePhoto" :preview-src-list="srcList">
                  <div slot="error">
                    无
                  </div>
                </el-image>
              </el-form-item>
              <el-form-item label="车辆照片" v-else>
                无
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车牌照片" v-if="carEnterLeave.lPlatePhoto != null && carEnterLeave.lPlatePhoto != ''">
                <el-image :src="carEnterLeave.lPlatePhoto" :preview-src-list="srcList">
                  <div slot="error" class="image-slot">
                    无
                  </div>
                </el-image>
              </el-form-item>
              <el-form-item label="车牌照片" v-else>
                无
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="openCarEnter = false">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog :title="title" :visible.sync="openVideoPlayer" width="800px" height="400px;">
        <!--在视频外面加一个容器-->
        <div class="input_video" id="video-content">
          <video
            id="myVideo"
            class="video-js"
          >
            <source
              src=""
              type=""
            >
          </video>
        </div>
      </el-dialog>
      <el-dialog :title="title" :visible.sync="openIframe" width="800px" height="400px;">
        <!--在视频外面加一个容器-->
        <div class="input_video">
          <iframe width="740px" height="400px" v-if="openIframe" :src="frUrl" frameborder=0 allowfullscreen></iframe>
        </div>
      </el-dialog>

    </div>
</template>
<script>
import {getWaybill} from '@/api/weight/waybill';
import {getRequirements} from "@/api/weight/requirements";
import {getCar} from "@/api/weight/car";

import { getBackVideoPath } from "@/api/weight/station";
import { getVideoPath } from "@/api/weight/record";

export default {
    name:"orderdetail",
    data(){
        return{
            detailInfo:null,
            isGoodsOpen:false,
            TmpGoodsList:[],
            GoodsList:[],
            isOpenWeight:false,
            TmpWeightList:[],
            WeightList:[],
            WeightImage:[],
            driver:{},
            car:{},
            openDriver:false,
            openCar:false,
            openLeaveCheck:false,
            openCarModelView:false,
            openVideoView: false,
            carType:'',
            srcList:[],
            videoUrl:'',
            car2:{},
            carG:{},
            carEnter:{},
            carLeave:{},
            carEnterLeave:{},
            carEnterTitle:undefined,
            openCarEnter:false,
            frUrl: '',
            openIframe: false,
            openVideoPlayer: false,
            myPlayer: undefined
        }
    },
    mounted(){
        this.GetWaybillDetail()
    },
    methods:{
        //获取详情
        async GetWaybillDetail(){
            try {
                let waybillid = this.$route.query.id
                const res = await getWaybill(waybillid)
                this.detailInfo = res.data
                if (res.data.deiver.car != null){
                  this.car2 = res.data.deiver.car
                }
                if (res.data.deiver.carG != null){
                  this.carG = res.data.deiver.carG
                }
                if(res.data.carEnter != null){
                  this.carEnter = res.data.carEnter;
                }
                if(res.data.carLeave != null){
                  this.carLeave = res.data.carLeave;
                }
                this.GoodsList = res.data.receiveUser
                this.WeightList = res.data.weightList
                this.TmpGoodsList = this.GoodsList.slice(0,2)
                this.TmpWeightList = this.WeightList.slice(0,3)
                this.TmpWeightList.forEach(el=>{
                    this.WeightImage.push(el.aPlatePhoto)
                    this.WeightImage.push(el.bPlatePhoto)
                })
            } catch (error) {
                this.$message({
                    type:"error",
                    message:error
                })
            }
        },
        OpenGoods(){
            this.isGoodsOpen = true
            this.TmpGoodsList = this.GoodsList
        },
        CloseGoods(){
            this.isGoodsOpen = false
            this.TmpGoodsList = this.GoodsList.slice(0,2)
        },
        OpenAllWeight(){
            this.WeightImage = []
            this.isOpenWeight = true
            this.TmpWeightList = this.WeightList
            this.TmpWeightList.forEach(el=>{
                this.WeightImage.push(el.aPlatePhoto)
                this.WeightImage.push(el.bPlatePhoto)
            })
        },
        CloseAllWeight(){
            this.WeightImage = []
            this.isOpenWeight = false
            this.TmpWeightList = this.WeightList.slice(0,3)
            this.TmpWeightList.forEach(el=>{
                this.WeightImage.push(el.aPlatePhoto)
                this.WeightImage.push(el.bPlatePhoto)
            })
        },
        initVideo(url,type) {
          if(document.getElementById("myVideo")==null || document.getElementById("myVideo").length <= 0 ){
            var videoContent = document.getElementById("video-content");
            videoContent.innerHTML = "<video\n" +
              "            id=\"myVideo\"\n" +
              "            class=\"video-js vjs-default-skin\"\n" +
              "          >\n" +
              "            <source\n" +
              "              src=\"\"\n" +
              "              type=\"\"\n" +
              "            >\n" +
              "          </video>";
          }
          //初始化视频方法
          let myPlayer = this.$video(myVideo, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: "muted",
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "740px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "400px",
            playbackRates: [0.5, 1, 1.5, 2],
            controlBar: {
              playToggle: {
                replay: false
              },
              volumePanel: {
                inline: false
              }
            },
            sources: [{
              src: url,
              type: type
            }]
          });
          myPlayer.play();
          this.myPlayer = myPlayer;
        },
        handleVideo(startTime,id){
          if(this.detailInfo.stationCode.indexOf("320205") != -1) {    // 锡山调用电信视频)
            let param={
              stationId: this.detailInfo.stationId,
              startTime: startTime
            }
            getBackVideoPath(param).then(response => {
              this.videoUrl=response.data.videoUrl;
            });
            setTimeout(() => {
              this.videoUrl='';
            }, 5000);
          }else{
            getVideoPath(id).then(response => {
              if(this.myPlayer != null && this.myPlayer != undefined && this.myPlayer != ''){
                if(this.myPlayer.isDisposed()==false){
                  this.myPlayer.dispose();
                }
              }
              if (response.code === 200) {
                const videoUrl=response.data.videoPath;
                if(this.detailInfo.stationCode.indexOf("320282") > -1){
                  this.frUrl = videoUrl;
                  this.openIframe = true;
                }else{
                  this.openVideoPlayer = true;
                  let type = "application/x-mpegURL";
                  if(videoUrl.indexOf("mp4")> -1){
                    type= 'video/mp4';
                  }
                  setTimeout(() => {
                    this.initVideo(videoUrl,type);
                  }, 100);
                }
              } else {
                this.msgError(response.msg);
              }
            });
          }

        },
        /** 驾驶员详情 */
        getDriver() {
          this.driver={};
          const requirementId = this.detailInfo.deiver.driverId
          getRequirements(requirementId).then(response => {
            this.driver = response.data;
            this.openDriver = true;
            this.srcList=[];
            this.srcList.push(this.driver.driverDrivingFirstPageUrl);
            this.srcList.push(this.driver.driverDrivingSecondPageUrl);
            this.srcList.push(this.driver.driverTransportationPageUrl);
          });
        },
        /** 车辆详情 */
        getCar(type) {
          this.car={};

          if(type == '1'){
            const carId = this.detailInfo.deiver.carId
            getCar(carId).then(response => {
              this.car = response.data;
              this.openCar = true;
              this.srcList=[];
              this.srcList.push(this.car.vehicleFirstPageUrl);
              this.srcList.push(this.car.vehicleSecondPageUrl);
              this.srcList.push(this.car.transportationPageUrl);
            });
          }else{
            const carId = this.detailInfo.deiver.trailerCarId
            getCar(carId).then(response => {
              this.car = response.data;
              this.openCar = true;
              this.srcList=[];
              this.srcList.push(this.car.vehicleFirstPageUrl);
              this.srcList.push(this.car.vehicleSecondPageUrl);
              this.srcList.push(this.car.transportationPageUrl);
            });
          }
        },
        carLeaveCheck(){
          this.openLeaveCheck = true;
        },
        isYesOrNo(value) {
          if(value == '1'){
            return '是';
          }else{
            return '否';
          }
        },
        yyzt(value) {
          if(value != null && value != ''){
            if(value == '1'){
              return '营运';
            }else if(value == '2'){
              return '停运';
            }else if(value == '3'){
              return '歇业';
            }else if(value == '4'){
              return '过户迁出';
            }else if(value == '5'){
              return '注销';
            }else if(value == '6'){
              return '报废';
            }else{
              return value;
            }
          }else{
            return value;
          }
        },
        isYc(value) {
          if(value == '2'){
            return '异常';
          }else{
            return '正常';
          }
        },
        // 取消按钮
        cancelDriver() {
          this.openDriver = false;
        },
        // 取消按钮
        cancelCar() {
          this.openCar = false;
        },
        getCarModel(type){
          this.carType = type;
          this.openCarModelView = true;
        },
        car_enter_leave(type){
          if(type == 1){
            this.carEnterLeave = this.carEnter;
            this.carEnterTitle = "车辆进场详情";
            this.srcList=[];
            this.srcList.push(this.carEnter.frontPlatePhoto);
            this.srcList.push(this.carEnter.lPlatePhoto);
          }else{
            this.carEnterLeave = this.carLeave;
            this.carEnterTitle = "车辆出场详情";
            this.srcList=[];
            this.srcList.push(this.carLeave.frontPlatePhoto);
            this.srcList.push(this.carLeave.lPlatePhoto);
          }
          this.openCarEnter = true;
        }
    }
}
</script>
<style lang="scss" scoped>
.order-detail{
    width: 100%;
    height: 100%;
    padding-block-end: 20px;
    box-sizing: border-box;
    .detail-ctx{
        width: 100%;
        height: 100%;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        .ctx-baseinfo{
            width: 100%;
            border:1px solid #e5e5e5;
            border-radius: 4px;
            box-sizing: border-box;
            .baseinfo-title{
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                font-size: 18px;
                font-weight: 550;
                color: #333;
                border-bottom: 1px solid #e5e5e5;
            }
            .baseinfo-ctx{
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                .ctx-item{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    margin: 5px auto;
                    .item-order{
                        flex: 1;
                        font-size: 16px;
                        color: #4a4a4a;
                        .order-no{
                            color: rgb(231, 72, 33);
                        }
                    }
                    .item-address{
                        flex: 1;
                        font-size: 16px;
                        color: #4a4a4a;
                    }
                    .item-info{
                        flex: 1;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        margin: 5px auto;
                        .info-rs{
                            flex: 1;
                            font-size: 16px;
                            color: #4a4a4a;
                        }
                    }
                }
                .ctx-pic{
                    width: 100%;
                    margin: 10px auto;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                }
            }
        }
        .ctx-goods{
            width: 100%;
            margin: 20px auto;
            border:1px solid #e5e5e5;
            border-radius: 4px;
            box-sizing: border-box;
            .goods-title{
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-bottom: 1px solid #e5e5e5;
                .title-g{
                    width: 30%;
                    font-size: 18px;
                    font-weight: 550;
                    color: #333;
                }
                .weight{
                    width: 30%;
                    font-size:16px;
                    color: #4a4a4a;
                }
                .all{
                    width: 40%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    font-size: 16px;
                    color: #333;
                    cursor: pointer;
                    .btn{
                        margin-left: 5px;
                        font-size: 20px;
                        font-weight: 550;
                    }
                }
            }
            .goods-ctx{
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-flow: wrap;
                .ctx-card{
                    width: 50%;
                    box-sizing: border-box;
                    margin-bottom: 10px;
                    &:nth-of-type(2n+1){
                        padding-right: 10px;
                    }
                    &:nth-of-type(2n+2){
                        padding-left: 10px;
                    }
                    .card-rs{
                        width: 100%;
                        background: #dddddd;
                        border-radius: 6px;
                        padding: 10px;
                        box-sizing: border-box;
                        .rs-title{
                            width: 100%;
                            padding: 10px 0;
                            box-sizing: border-box;
                            border-bottom: 1px solid #999;
                            display: flex;
                            justify-content: space-around;
                            align-items: center;
                            font-size: 18px;
                            color: #333;
                            .name{
                                flex: 1;
                            }
                            .val{
                                flex: 1;
                            }
                        }
                        .rs-txt{
                            width: 100%;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: 16px;
                            color: #4a4a4a;
                            margin: 10px auto;
                            .txt-name{
                                flex: 1;
                            }
                            .txt-val{
                                flex: 1;
                                text-align: right;
                            }
                        }
                    }
                }
            }
        }
        .ctx-driver{
           width: 100%;
            margin: 20px auto;
            border:1px solid #e5e5e5;
            border-radius: 4px;
            box-sizing: border-box;
            .driver-title{
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                font-size: 18px;
                font-weight: 550;
                color: #333;
                border-bottom: 1px solid #e5e5e5;
            }
            .driver-item{
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-flow: wrap;
                border-bottom: 1px solid #e5e5e5;
                .item-txt{
                    margin: 10px auto;
                    width: 50%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: 16px;
                    color: #4a4a4a;
                    .txt-val{
                        margin-left: 5px;
                    }
                }
            }
            .driver-info{
                width: 100%;
                margin: 10px auto;
                padding: 10px 20px;
                box-sizing: border-box;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .info-item{
                    flex: 1;
                    font-size: 16px;
                    color: #4a4a4a;
                }
            }
            .warn-info{
               width: 100%;
               padding: 10px 20px;
               box-sizing: border-box;
               .info-item{
                 width: 100%;
                 background: #e4e4e4;
                 border-radius: 6px;
                 padding: 15px;
                 box-sizing: border-box;
                 font-size: 16px;
                 color: #4a4a4a;
               }
             }
        }
        .ctx-weight{
            width: 100%;
            margin: 20px auto;
            border:1px solid #e5e5e5;
            border-radius: 4px;
            box-sizing: border-box;
            .weight-title{
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;

                border-bottom: 1px solid #e5e5e5;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .title-w{
                    flex: 1;
                    font-size: 18px;
                    font-weight: 550;
                    color: #333;
                }
                .all{
                    flex: 1;
                    text-align: right;
                    font-size: 16px;
                    color: #333;
                    cursor: pointer;
                    .btn{
                        margin-left: 5px;
                        font-size: 20px;
                        font-weight: 550;
                    }
                }
            }
            .weight-info{
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                .info-table{
                    width: 100%;
                    border-collapse: collapse;
                    margin: 0 auto;
                    text-align: center;
                    font-size: 14px;
                    td,th{
                        border: 1px solid #d8d9da;
                        color: #666;
                        height: 42px;
                        font-weight: normal;
                    }
                    thead th{
                        background-color: rgb(235, 235, 235);
                        width: 100px;
                    }
                    tr:nth-child(odd){
                        background: #fff
                    }
                    tr:nth-child(even){
                        background: rgb(228, 228, 228);
                    }
                    td.state{
                        color: rgba(241, 45, 45, 0.911);
                    }
                }
            }
        }
        .ctx-warn{
            width: 100%;
            margin: 20px auto;
            border:1px solid #e5e5e5;
            border-radius: 4px;
            box-sizing: border-box;
            .warn-title{
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                font-size: 18px;
                font-weight: 550;
                color: #333;
                border-bottom: 1px solid #e5e5e5;
            }
            .warn-info{
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                .info-item{
                    width: 100%;
                    background: #e4e4e4;
                    border-radius: 6px;
                    padding: 15px;
                    box-sizing: border-box;
                    font-size: 16px;
                    color: #4a4a4a;
                }
            }
        }
    }
    .pic-box{
        display: inline-block;
        width: 140px;
        /*height: 100px;*/
        /*background: #dbdbdb;*/
        margin: auto 15px;
        overflow: hidden;
        .pic{
            width: 100%;
            height: 100%;
        }
    }
}

@import '../../../assets/styles/ledger_style.scss';
</style>


